<template>
  <div class="recharge">
    <div class="login_top flex">
      <div class="left_logo"></div>
      <div class="flex-1 flex flex-between-center">
        <p style="font-size:24px;padding-left:35px">充值中心</p>
        <div class="flex align-center">
          
        </div>
      </div>
    </div>
    <div style="background-color:#f5f5f5;padding:30px 0;">
      <div class="text-center middle_content">
        <div class="top">
          <span
            class="blue-font"
            style="font-size:60px"
          >
            <i class="el-icon-success"></i>
          </span>
          <p
            class="blue-font"
            style="font-size:24px;margin:10px 0 15px"
          >充值成功</p>
          <p class="color-999">{{currentDate}}</p>
        </div>
        <el-table
          :data="tableData"
          border
          style="margin:40px 0 20px"
        >
          <el-table-column
            align="center"
            label="充值账户"
            prop="account"
          />
          <el-table-column
            align="center"
            label="充值方式"
            prop="type"
          />
          <el-table-column
            align="center"
            label="充值金额"
            prop="amount"
          />
          <el-table-column
            align="center"
            label="流水号"
            prop="out_trade_no"
          />
        </el-table>
        <p class="text-center">
          <el-button
            type="primary"
            size="medium"
            @click="$router.push({name:'recharge'})"
          >继续充值</el-button>
        </p>
      </div>
    </div>

    <div class="login_footer">
      <!-- <a
        href="https://beian.miit.gov.cn"
        target="_blank"
      ></a> -->
    </div>
  </div>
</template>

<script>
import { getName } from "@/utils/auth";
import { formatDate } from '@/utils/index';
export default {
  data() {
    return {
      currentDate: '',
      tableData: []
    }
  },
  methods: {
    getData() {
      this.currentDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm');
      console.log(sessionStorage.getItem('amount'))
      this.tableData = [
        {
          account: this.userName,
          type: '支付宝',
          amount: sessionStorage.getItem('amount'),
          out_trade_no: sessionStorage.getItem('out_trade_no')
        }
      ]
    },
  },
  created() {
    this.getData();
  },
  computed: {
    userName() {
      return getName();
    }
  },
  beforeDestroy() {
    sessionStorage.removeItem("amount");
    sessionStorage.removeItem("out_trade_no");
  }
}
</script>

<style lang="scss" scoped>
.login_top {
  height: 75px;
  width: 1200px;
  margin: 0 auto;
  .left_logo {
    height: 48px;
    width: 172px;
    margin-top: 15px;
    background: url(../../assets/images/login_logo.png) no-repeat;
    background-size: 100%;
  }
}
.login_footer {
  text-align: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  text-decoration: none;
  padding: 20px 0;
  a:hover {
    color: #53a6ff;
  }
}
.middle_content {
  width: 1000px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #ffffff;
  padding: 50px 75px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
}
</style>